<template>
  <div class="count-down">
    <div class="times iconfont" :style="'color:' + color">
      {{drawTime}}
    </div>
  </div> 
</template>

<script>
import CountDownItem from './components/count-down-item'
import { formatCountDown } from '@/assets/js/util'
export default {
  components: {
    CountDownItem
  },
  props: {
    timeStamp: {
      type: Number,
      default: 0
    },
    color: {
      type: String,
      default: '#e02828'
    }
  },
  data() {
    return {
      drawTime: '00:00:00'
    }
  },
  created() {
    this.countDownDrawTime()
  },
  beforeDestroy() {
    clearTimeout(this.timer)
  },
  methods: {
    countDownDrawTime() {
      this.drawTime = formatCountDown(this.timeStamp)
      if(this.drawTime == '00:00:00') {
        return 
      }
      this.timer = setTimeout(() => {
        this.countDownDrawTime()
      }, 500)
    }
  }
}
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/variables.styl'
    .count-down 
      display flex 
      align-items center 
      // justify-content flex-end 
     
</style>